import React from 'react'
import { useState } from "react"
import { NavLink } from "react-router-dom"
import { Layout, Menu } from 'antd';
import routerList from '../router/routerList';
import RouterView from '../router/routerView';
import { Breadcrumb } from 'antd';
import NewBreadcrumb from "../utils/mianbao"
import { BrowserRouter, HashRouter } from "react-router-dom"
import {
    AppstoreOutlined,
    ContainerOutlined,
    DesktopOutlined,
    MailOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
} from '@ant-design/icons';
const { Header, Footer, Sider, Content } = Layout;
function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const items = [
    getItem(<NavLink to="/dh1">导航1</NavLink>, '1', <PieChartOutlined />),
    getItem('Navigation One', 'sub1', <MailOutlined />, [
        getItem(<NavLink to="/dh2">导航2</NavLink>, '5'),
        getItem(<NavLink to="/dh3">导航3</NavLink>, '6')
    ]),
]
function App(props) {
  
    const [mode, setMode] = useState(true)
    const [collapsed, setCollapsed] = useState('false');

    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };
    return (
        <div style={{ width: '100%', height: '100%' }}>
            <button onClick={() => setMode(!mode)} >切换路由模式</button>
            {
                mode ? <BrowserRouter>
                    <Layout>
                        <Header>
                        </Header>
                        <Layout>
                            <Sider>
                                <Menu
                                    defaultSelectedKeys={['1']}
                                    defaultOpenKeys={['sub1']}
                                    mode="inline"
                                    theme="dark"
                                    collapsed={collapsed}
                                    items={items}
                                />
                            </Sider>
                            <Content>
                                <NewBreadcrumb></NewBreadcrumb>
                                <RouterView RouterList={routerList}></RouterView>


                            </Content>
                        </Layout>
                        <Footer>Footer</Footer>
                    </Layout>

                </BrowserRouter> : <HashRouter>
                    <Layout>
                        <Header>
                        </Header>
                        <Layout>
                            <Sider>
                                <Menu
                                    defaultSelectedKeys={['1']}
                                    defaultOpenKeys={['sub1']}
                                    mode="inline"
                                    theme="dark"
                                    collapsed={collapsed}
                                    items={items}
                                />
                            </Sider>
                            <Content>

                                <RouterView RouterList={routerList}></RouterView>


                            </Content>
                        </Layout>
                        <Footer>Footer</Footer>
                    </Layout>
                </HashRouter>
            }


        </div>
    )
}

export default App